<!-- 柱状图 -->
<template>
  <div>
    <!-- <div class="title"><p>{{title}}</p></div> -->
    <div ref="barchart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
import { formatBytes } from "@/utils/index.js";
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "显示日统计趋势"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "324px"
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, "macarons");
    this.setOptions(this.chartData);
  },
  methods: {
    setOptions(chartData) {
      let colorList = [
        "#63ace5",
        "#f9dc5c",
        "#b8e994",
        "#ff7272",
        "#ffa931",
        "#85a392",
        "#9174d7",
        "#f78fb3",
        "#cc8e35",
        "#f19066"
      ];
      let seriesData = chartData.series.map((item, index) => {
        return {
          value: item,
          itemStyle: {
            color: "#5f91a8"
          }
        };
      });
      this.myChart.setOption({
        grid:{
          left: 60,
          right: 20,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          inverse: true, //倒叙
          data: chartData.xAxis,
          splitLine: {
            lineStyle: {
              color: "#666", // 修改网格线颜色为浅灰色
              type: "dashed", // 添加虚线效果
              width: 1 // 线条宽度
            }
          }
        },
        tooltip: {
          trigger: "item",
          formatter: function name(params) {
            return `${formatBytes(params.value)}/S`;
          }
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  formatter: (params) => {
                    return formatBytes(params.value);
                  },
                  textStyle: {
                    //数值样式
                    color: "#5f91a8",
                    fontSize: 14
                  }
                }
              }
            }
          }
        ],
        color: colorList
      });
    }
  }
};
</script>
<style scoped></style>
